import Preparation from '../../shared/preparation.md'
import { Tabs, Tab, PackageManagerTabs } from '@theme';
import YarnProblem from '../../shared/problems/yarnProblem.md'

# Vue2 MF

在Vue2中，我们准备了两个进阶示例项目作为参考，分别是：

- `vue-2-base`：基础项目，用于书写通用业务组件对外暴露，它通常是一些项目的基石。
- `vue-2-project`：应用项目，用于和其他通用业务组件进行集成，它通常是一些项目的业务逻辑。

:::info 💡 TIP
两个业务的demo仅仅只是部分依赖以及emp的配置不一样，您可以根据您的业务需求进行自由选择或者组合。
:::

<Preparation />

### 安装emp⚡

具体操作步骤请参考[快速上手](/guide/start/quick-start)

### 项目初始化

在对项目进行初始化之前，我们先克隆`emp`仓库，将示例代码拉取到本地。

```bash
git clone https://github.com/empjs/emp
```

:::danger 🚨 可能遇到的错误
如果您无法拉取项目至本地，请检查您的网络环境或代理设置是否可以访问github，如果仍不能解决，请联系我们。
:::

在拉取完成代码后，我们进入代码的根目录，安装项目依赖，推荐使用`PNPM`进行安装：

<PackageManagerTabs command="install" />

安装完依赖后，运行Vue2示例项目的前期准备就完成了🎉。

## 运行示例项目

:::warning ⚠️ 注意
在运行示例项目之前，请确保您已经完成了前期准备，并当前目录处于`emp`仓库的根目录下。
:::

### vue2 demo

首先进入示例项目的根目录：

```bash
cd demos/vue2
```

然后运行代码：
<PackageManagerTabs command="dev" />

运行成功后，您可以分别访问`http://localhost:9001/` 与 `http://localhost:9002/`进行查看。

#### 演示效果

`:9001` 基站效果：

<iframe src="https://mf-vue2.sc.empjs.dev/host/"
  style={{width: '100%', height: '1500px', border: `20px solid #aaa`, borderRadius: '4px', overflow: 'hidden'}}
  title="mf-host"
></iframe>

`:9002` 应用效果：

<iframe src="https://mf-vue2.sc.empjs.dev/app/"
  style={{width: '100%', height: '1000px', border: `20px solid #aaa`, borderRadius: '4px', overflow: 'hidden'}}
  title="mf-host"
></iframe>

### 远程组件调用
```vue title="vue-2-project/src/App.vue"
<template>
  <div class="main">
    <h1>Project App vue 2 project</h1>
    <h2>=== @v2b/Content ===</h2>
    <Content />
    <h2>CompositionApi</h2>
  <CompositionApi />
    <h2>=== @v2b/Table ===</h2>
    <Table />
  </div>
</template>

<script>
//import Content from "@v2b/Content"
export default {
  components: {
    Content: () => import('@v2b/Content'),
    Table: () => import('@v2b/Table'),
    CompositionApi: () => import('@v2b/CompositionApi'),
  },
}
</script>

<style scoped lang="scss">
.main {
  img {
    width: 200px;
  }

  h1 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 60px;
  }
}
</style>

```

### 项目配置

```ts title="vue-2-base/emp.config.ts"
import {defineConfig} from '@empjs/cli'
import vue from '@empjs/plugin-vue2'
import {pluginRspackEmpShare} from '@empjs/share'
export default defineConfig(store => {
  return {
    plugins: [
      vue(),
      pluginRspackEmpShare({
        name: 'vue2Base',
        // 基站暴露远程组件
        exposes: {
          './Content': './src/components/Content',
          './Table': './src/components/table',
          './CompositionApi': './src/components/CompositionApi',
          './store': './src/store',
        },
        empRuntime: {
          // 模块联邦运行时依赖
          runtimeLib: "https://unpkg.com/@empjs/share@3.1.5/output/sdk.js",
          // 框架与公共库依赖
          shareLib: {
            vue: 'Vue@https://unpkg.com/vue@2.7.14/dist/vue.min.js',
            vuex: "Vuex@https://unpkg.com/vuex@3.6.2/dist/vuex.min.js",
            'element-ui': [
              'ELEMENT@https://unpkg.com/element-ui/lib/index.js',
              "https://unpkg.com/element-ui/lib/theme-chalk/index.css",
            ],
          },
          framework: 'vue2',
        },
      }),
    ],
    html: {
      title: 'EMP3 vue2 base',
    },
    server: {
      port: 9001,
      open: false,
    },
    appEntry: 'main.js',
    debug: {
      clearLog: false,
    },
  }
})

```

```ts title="vue-2-project/emp.config.ts"
import {defineConfig} from '@empjs/cli'
import vue from '@empjs/plugin-vue2'
import {pluginRspackEmpShare} from '@empjs/share'
// cf 1
//
export default defineConfig(store => {
  const ip = store.getLanIp()
  const vue2Base = `http://${ip}:9001/emp.js`
  return {
    plugins: [
      vue(),
      pluginRspackEmpShare({
        name: 'vue2Base',
        // 配置依赖的远程项目
        remotes: {
          '@v2b': `vue2Base@${vue2Base}`,
        },
        empRuntime: {
          // 模块联邦运行时依赖
          runtimeLib: "https://unpkg.com/@empjs/share@3.1.5/output/sdk.js",
          // 框架与公共库依赖
          shareLib: {
            vue: 'Vue@https://unpkg.com/vue@2.7.14/dist/vue.min.js',
            vuex: "Vuex@https://unpkg.com/vuex@3.6.2/dist/vuex.min.js",
            'element-ui': [
              'ELEMENT@https://unpkg.com/element-ui/lib/index.js',
              "https://unpkg.com/element-ui/lib/theme-chalk/index.css",
            ],
          },
          framework: 'vue2',
        },
      }),
    ],
    html: {
      title: 'EMP3 vue2 project',
    },
    server: {port: 9002},
    appEntry: 'main.js',
  }
})

```

## 常见问题

<YarnProblem />